<template>
  <el-config-provider :z-index="zIndex">
    <div class="common-layout">
      <el-container class="container">
        <el-header class="layout-header"><TSHeader/></el-header>
        <el-main class="layout-main"><RouterView/></el-main>
        <el-footer class="layout-footer"><TSFooter/></el-footer>
      </el-container>
    </div>
  </el-config-provider>  
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import TSHeader from '../components/layouts/TsHeader.vue'
import TSFooter from '../components/layouts/TsFooter.vue'
export default defineComponent({
  components: {
    TSHeader,TSFooter,ElConfigProvider
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

<style scoped lang="less">
.common-layout{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;  
}

.container{
  height: 100%;
}

.layout-header{
  background-color: #FFF;
}

.layout-main{
  width:100%;
  height: calc(100vh - var(--ep-menu-item-height) - 3px);
}

.layout-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  margin: 0 1rem;
  background-color: #FFF;
}
</style>